<template>
	<scroll-view
		class="gy-scroll-view"
		:scroll-y="true"
		scroll-with-animation
		refresher-default-style="none"
        refresher-background="#efefef"
		:refresher-enabled="props.pullDownRefresh"
		:refresher-triggered="refresher"
		:refresher-threshold="0"
		:scroll-top="scrollTop"
		:style="{height: `calc(100vh - ${ props.tabbarHeight + 'rpx' })`}"
		@refresherpulling="onPullingFn"
		@refresherrefresh="onRefreshFn"
		@refresherrestore="pullDoneFn"
		@refresherabort="pullDoneFn"
		@scrolltolower="loadMoreFn"
		@scroll="scrollFn">
        <template v-if="dropDown" slot="refresher">
            <view class="refresher">
            	<view class="refresher-animation">
            		<view :class="{animation: refresher}" v-for="item in 5" :key="item"></view>
            	</view>
            	<view class="refresher-tip">{{ refresherTip }}</view>
            </view>
        </template>
		<slot></slot>
		<!-- <com-loadmore v-if="props.pullUpLoad" :loading="loading" /> -->
		<com-loadmore v-if="loading" :loading="loading" />
        <view style="height: 100rpx;"></view>
	</scroll-view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed,
    	onMounted
    } from "vue";

    const emits = defineEmits(["scroll", "load", "refresh"]);

    const props = defineProps({
        tabbarHeight: {
        	type: Number,
        	default: 0
        },
        pullDownRefresh: {
        	type: Boolean,
        	default: false
        },
        pullUpLoad: {
        	type: Boolean,
        	default: false
        }
    })

    const scrollTop = ref(0);
    const _freshing = ref(false);
    const dropDown = ref(false);
    const refresher = ref(false);
    const refresherTip = ref("松开刷新");
    const _loading = ref(false);
    const loading = ref(false);
    const backTop = ref(false);

    function scrollFn(e: any){
    	emits("scroll", e);
    	// console.log(e.detail.scrollTop);
    	// scrollTop = e.detail.scrollTop;
    	// backTop = e.detail.scrollTop > uni.getSystemInfoSync().safeArea.height;
    }
    function onPullingFn(e: any) {
    	dropDown.value = true;
    	refresherTip.value = "松开刷新";
    }
    function onRefreshFn() {
    	if (_freshing.value) return;
    	_freshing.value = true;
    	refresher.value = true;
    	emits("refresh", pullDoneFn);
    	refresherTip.value = "正在刷新";
    	setTimeout(() => {
    		refresher.value = false;
    		_freshing.value = false;
    	}, 10000)
    }
    function loadMoreFn(){
    	if(props.pullUpLoad){
    		if (_loading.value) return;
    		loading.value = true;
    		_loading.value = true;
    		emits("load", pullDoneFn);
    		setTimeout(() => {
    			loading.value = false;
    			_loading.value = false;
    		}, 10000);
    	}
    }
    function pullDoneFn(){
    	refresher.value = false;
    	_freshing.value = false;
    	loading.value = false;
    	_loading.value = false;
        dropDown.value = false;
    }

</script>

<style lang="scss" scoped>
	.gy-scroll-view{
	    padding-top: 1rpx;
	    overflow: auto;
	    .refresher{
	        height: 200rpx;
	        @include flex-center-center;
	        flex-direction: column;
	        background-color: #efefef;
	        .refresher-animation{
	            display: flex;
	            align-items: center;
	            view {
	                width: 10rpx;
	                height: 50rpx;
	                border-radius: 10px;
	                margin: 0 5rpx;
	                background-color: var(--gy-color-primary);
	            }
	            view:nth-child(1),
	            view:nth-child(5) {
	                animation-delay: -0.6s;
	            }
	            view:nth-child(2),
	            view:nth-child(4) {
	                animation-delay: -0.5s;
	                transform: scaley(0.6);
	            }
	            view:nth-child(3) {
	                animation-delay: -0.4s;
	                transform: scaley(0.4);
	            }
	            .animation{
	                animation: line-keyframes 1.2s infinite;
	            }
	            @keyframes line-keyframes {
	                0% {
	                    transform: scaley(1);
	                }

	                50% {
	                    transform: scaley(0.4);
	                }

	                100% {
	                    transform: scaley(1);
	                }
	            }
	        }
	        .refresher-tip{
	            margin-top: 10rpx;
	            font-size: var(--gy-font-size-small);
	            color: var(--gy-text-color-placeholder);
	        }
	    }
	}

</style>
